<template>
  <div class="table-container">
    <span class="title">数据库属性</span>
    <div class="search-container">
      <span>字段名称:</span>
      <a-input class="item" placeholder="请输入字段名称" allow-clear v-model="searchObj.columnName" @keyup.enter.native="handleSearch" />
      <span style="margin-left: 30px">显示别名:</span>
      <a-input class="item" placeholder="请输入显示别名" allow-clear v-model="searchObj.columnComment" @keyup.enter.native="handleSearch" />
      <a-button style="margin-left: 30px" type="primary" @click="handleSearch">查询</a-button>
      <a-button style="margin-left: 8px" @click="handleReset">重置</a-button>
    </div>
    <div class="content">
      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="relIndexId"
        :scroll="{ y: 505 }"
        :columns="columns"
        :pagination="false"
        :loading="loading"
        :dataSource="topicCols"
        :style="{ borderBottom: topicCols.length > 8 ? 'solid 1px #e8e8e8' : '' }"
      >
        <span slot="columnComment" slot-scope="text, record">
          <a-input style="width: 130px" placeholder="显示别名(备注)" allow-clear v-model="record.columnComment" />
        </span>
        <span slot="columnName" slot-scope="text, record">
          <a-input style="width: 130px" placeholder="字段名称" allow-clear v-model="record.columnName" />
        </span>
        <span slot="columnLength" slot-scope="text, record">
          <a-input-number
            style="width: 70px"
            placeholder="长度"
            :min="1"
            :parser="parserWidth"
            v-model="record.columnLength"
          />
        </span>
        <span slot="isIndex" slot-scope="text, record">
          {{ record.isIndex === '1' ? '否' : '是' }}
        </span>
        <span slot="dataType" slot-scope="text, record">
          {{ handleDataType(record.dataType) }}
        </span>
        <span slot="defaultValue" slot-scope="text, record">
          <a-input style="width: 90px" placeholder="默认值" allow-clear v-model="record.defaultValue" />
        </span>
        <span slot="remark" slot-scope="text, record">
          <a-input style="width: 110px" placeholder="备注" allow-clear v-model="record.remark" />
        </span>
        <span slot="action" slot-scope="text, record">
          <a-popconfirm placement="topLeft" title="确定删除吗?" @confirm="() => handleDelete(record)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </div>
  </div>
</template>

<script>
import { ajaxGetDictItems } from '@/api/api'

export default {
  name: 'TopicTableInfo',
  props: {},
  data() {
    return {
      searchObj: {
        columnName: '',
        columnComment: ''
      },
      loading: false,
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '指标/维度',
          align: 'center',
          dataIndex: 'name',
          width: 80
        },
        {
          title: '关联指标/维度',
          align: 'center',
          dataIndex: 'comment',
          width: 110
        },
        {
          title: '显示别名(备注)',
          align: 'center',
          dataIndex: 'columnComment',
          width: 140,
          scopedSlots: { customRender: 'columnComment' }
        },
        {
          title: '字段名称',
          align: 'center',
          dataIndex: 'columnName',
          width: 140,
          scopedSlots: { customRender: 'columnName' }
        },
        {
          title: '是否主键',
          align: 'center',
          dataIndex: 'isIndex',
          scopedSlots: { customRender: 'isIndex' },
          width: 80
        },
        {
          title: '数据类型',
          align: 'center',
          dataIndex: 'dataType',
          width: 100,
          scopedSlots: { customRender: 'dataType' }
        },
        {
          title: '长度',
          align: 'center',
          dataIndex: 'columnLength',
          width: 80,
          scopedSlots: { customRender: 'columnLength' }
        },
        {
          title: '小数点位数',
          align: 'center',
          dataIndex: 'scale',
          width: 90
        },
        {
          title: '默认值',
          align: 'center',
          dataIndex: 'defaultValue',
          width: 100,
          scopedSlots: { customRender: 'defaultValue' }
        },
        {
          title: '备注',
          align: 'center',
          dataIndex: 'remark',
          width: 120,
          scopedSlots: { customRender: 'remark' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      topicCols: [],
      topicColsBack: [],
      dataTypeArray: []
    }
  },
  created() {
    this.handleDataTypeArray('column_data_type')
  },
  methods: {

    /**
     * @description 数字类型转化功能
     * @returns void
     */
    parserWidth(value) {
      if (value.length < 1) {
        return 1
      }
      let v = parseInt(value)
      if (!isNaN(v)) {
        if (v < 1) {
          return 1
        } else {
          return v
        }
      } else {
        return 1
      }
    },

    /**
     * @description 处理查询出来的数据
     * @param {*} array
     * @returns void
     */
    handleTableData(array) {
      // 处理数据
      array.map((item, index) => {
        item.comment = item.columnComment
        item.name = item.isIndex === '1' ? '指标' : '维度'
      })
      this.topicCols = array
      // 数据备份
      this.topicColsBack = array
    },

    /**
    * @description 查询
    * @returns void
    */
    handleSearch() {
      this.loading = true
      setTimeout(() => {
        const matchingTopicCols = [] // 匹配数据行暂存数组
        // 根据查询条件进行过滤数据, 字段名称和显示别名(备注)
        this.topicColsBack.map(item => {
          // 根据查询条件输入状态，按照不同场景进行数据处理
          if (this.searchObj.columnName && this.searchObj.columnComment) {
            if (item.columnName.match(this.searchObj.columnName) && item.columnComment.match(this.searchObj.columnComment)) matchingTopicCols.push(item)
          } else if (this.searchObj.columnName) {
            if (item.columnName.match(this.searchObj.columnName)) matchingTopicCols.push(item)
          } else if (this.searchObj.columnComment) {
            if (item.columnComment.match(this.searchObj.columnComment)) matchingTopicCols.push(item)
          } else {
            matchingTopicCols.push(item)
          }
        })
        this.topicCols = matchingTopicCols
        this.loading = false
      })
    },

    /**
     * @description 重置查询
     * @returns void
     */
    handleReset() {
      this.searchObj = {
        columnName: '',
        columnComment: ''
      }
      this.handleSearch()
    },

    /**
     * @description 获取数据字典
     * @returns void
     */
    handleDataTypeArray(dictCode) {
      //根据字典Code, 初始化字典数组
      ajaxGetDictItems(dictCode, null).then((res) => {
        if (res.success) {
          this.dataTypeArray = res.result
        }
      })
    },

    /**
     * @description 处理字典显示
     * @returns void
     */
    handleDataType(dataType) {
      const item = this.dataTypeArray.filter(t => t["value"] === dataType)
      if (item && item.length > 0) {
        return item[0]["text"]
      }
    },

    /**
     * @description 表格数据删除
     * @param {Object} record
     * @returns void
     */
    handleDelete(record) {
      // 维度和指标的数据至少留一个
      let countIndex = 0
      let countDimension = 0
      for (let i = 0; i < this.topicCols.length; i++) {
        if (this.topicCols[i].isIndex === '1') {
          countIndex++
        }
        if (this.topicCols[i].isIndex === '0') {
          countDimension++
        }
      }
      if (record.isIndex === '1' && countIndex === 1) {
        this.$message.warning('当前指标只有剩一个,不允许继续删除!')
        return
      }
      if (record.isIndex === '0' && countDimension === 1) {
        this.$message.warning('当前维度只有剩一个,不允许继续删除!')
        return
      }

      const matchingTopicCols = []
      this.topicColsBack.map((item, index) => {
        if (record.relIndexId !== item.relIndexId) {
          matchingTopicCols.push(item)
        }
      })
      this.topicCols = matchingTopicCols
      this.topicColsBack = matchingTopicCols
    },

    /**
     * @description 校验数据的正确性
     * @returns void
     */
    handleTableDataRight() {
      const obj = {
        nextFlag: true,
        topicCols: []
      }
      for (let i = 0; i < this.topicCols.length; i++) {
        if (this.topicCols[i].columnName === '') {
          this.$message.warning('第' + (index + 1) + '的字段名称不能为空，请输入')
          obj.nextFlag = false
          return
        }
      }
      if (obj.nextFlag === false) {
        return obj
      }
      obj.topicCols = this.topicCols
      return obj
    }

  }
}
</script>

<style lang="less" scoped>
.table-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 5px 0;
  .title {
    font-size: 15px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 500;
    color: #222222;
    width: 100%;
    text-align: left;
    padding-left: 17px;
  }
  .search-container {
    width: 100%;
    height: 36px;
    padding-left: 20px;
    margin-top: 40px;
    .item {
      width: 200px;
      margin-left: 10px;
    }
  }
  .content {
    width: 100%;
    height: calc(100% - 85px);
    margin-top: 10px;
    padding: 0 10px 5px 10px;
  }
}
</style>
